<template>
  <transition name="fade" mode="out-in">
    <el-container class="zh-container">
      <transition name="slide-fade">
        <el-aside ref="menuNav">
          <el-menu :default-active="routeName" class="el-menu-vertical-demo" :collapse="menuShow">
            <el-menu-item index="0" class="menu-home">
              <a @click="goHome('/home')">
                <img src="./../../../static/image/home/home.png" alt="home" />
                <span style="font-size: 13px" slot="title">返回首页</span>
              </a>
            </el-menu-item>
            <el-submenu v-for="item in menuNavRouteData.children" :index="item.path" :key="item.name">
              <template slot="title">
                <i><img :src="
                  '/static/image/' + menuIcon + '/' + item.path + '.png'
                " width="16" /></i>
                <span>{{ item.txtName }}</span>
              </template>
              <el-menu-item-group>
                <template v-for="item2 in item.children">
                  <el-menu-item v-if="
                    item2.showLeft !== false &&
                    item2.path === 'AI-analysis' &&
                    showAI
                  " :key="item2.name" :index="activePath(item2.path, item2.activePath)">
                    <a @click="
                      linkTo(
                        '/' +
                        menuNavRouteData.path +
                        '/' +
                        item.path +
                        '/' +
                        item2.path
                      )
                    ">{{ item2.txtName }}</a>
                  </el-menu-item>
                  <el-menu-item v-if="
                    item2.showLeft !== false && item2.path !== 'AI-analysis'
                  " :key="item2.name" :index="activePath(item2.path, item2.activePath)">
                    <a @click="
                      linkTo(
                        '/' +
                        menuNavRouteData.path +
                        '/' +
                        item.path +
                        '/' +
                        item2.path
                      )
                    ">{{ item2.txtName }}</a>
                  </el-menu-item>
                </template>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </transition>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </transition>
</template>
<script>
import { debounce } from "@/tools/tool.js";
export default {
  data() {
    return {
      routeName: "",
      menuNavRouteData: deep_clone(this.$store.getters.leftMenuNav),
      server_type: "",
      menuIcon: "",
      showAI: true, //默认显示AI分析设备
    };
  },
  mounted() {
    this.watchWindow();
    this.checkAI();
  },
  created() {
    this.routeName = this.$route.name;
    this.menuIcon = this.$route.fullPath.split("/")[1];
    // console.log(JSON.parse(JSON.stringify(this.menuNavRouteData)))
    // this.$store.state.checkLevel (true: 多级， false: 单机)
    // this.$store.state.platformInformation (true: 教育局 false: 学校)
    if (this.$store.state.checkLevel) {
      this.deleteItem();
    }
  },
  computed: {
    menuShow() {
      return deep_clone(this.$store.getters.menuNavFlag);
    },
    /**
     * 三级路由可以在二级路由高亮
     */
    activePath() {
      return (path, arr) => {
        let name = path;

        if (Object.prototype.toString.call(arr) === "[object Array]") {
          name = arr.includes(this.routeName) ? this.routeName : path;

          // 第三方组件没有更新activeIndex，需要手动更新
          if (this.$refs.menuNav) {
            this.$nextTick(() => {
              this.$refs.menuNav.$children[0].activeIndex = this.routeName;
            });
          }
        }

        return name;
      };
    },
  },
  watch: {
    menuShow: function (val) {
      this.routeName = this.$route.name;
    },
    $route(to, from) {
      this.routeName = to.name;
    },
  },
  methods: {
    // 数据处理项------------------------------------------------
    deleteItem() {
      if (this.menuNavRouteData.txtName === "门户管理子系统") {
        if (
          sessionStorage.getItem("CheckSchoolAppCode") !==
          "00000000000000000000000000000000"
        ) {
          this.menuNavRouteData.children.pop(); // 截取敏感词管理
        }
      }
      // if(this.$store.state.platformInformation){
      // 	if(this.menuNavRouteData.txtName === '用户管理子系统') {
      // 		this.menuNavRouteData.children.splice(1,1) // 截取班级
      // 		this.menuNavRouteData.children.pop() // 截取学籍管理
      // 		this.menuNavRouteData.children[2].children.splice(1,1) // 截取数据管理-用户私信日志
      // 	}
      // 	if(this.menuNavRouteData.txtName === '资源管理子系统'){
      // 		this.menuNavRouteData.children[1].children.splice(1,1) // 截取直播管理-预约审核
      // 		this.menuNavRouteData.children[2].children.splice(2,1) // 截取教材管理
      // 		this.menuNavRouteData.children.pop() // 截取试题管理
      // 	}
      // 	if(this.menuNavRouteData.txtName === '教学管理子系统') {
      // 		this.menuNavRouteData.children.splice(1,2) // 截取备课管理学习统计
      // 	}
      // 	if(this.menuNavRouteData.txtName === '教务管理子系统') {
      // 		this.menuNavRouteData.children.shift() // 截取请假管理
      // 		this.menuNavRouteData.children.pop() // 截取素质评价
      // 		this.menuNavRouteData.children.pop() // 截取学期管理
      // 		this.menuNavRouteData.children.splice(2,1) // 截取课时管理
      // 		this.menuNavRouteData.children[2].children.splice(1,1) // 截取名师审核
      // 	}
      // }
    },
    // 数据处理项------------------------------------------------

    goHome(link) {
      this.$router.push(link);
    },

    linkTo(link) {
      this.$router.push(link);
    },
    // 监听浏览器宽度来判断是否隐藏菜单栏
    watchWindow() {
      const minWin = 1280;

      if (document.querySelector(".zh-main").clientWidth > minWin) {
        this.$store.commit("SET_MENUNAV", false);
      } else {
        this.$store.commit("SET_MENUNAV", true);
      }

      const lazyLayout = debounce(() => {
        let win = document.querySelector(".zh-main").clientWidth;
        if (win < minWin) {
          this.$store.commit("SET_MENUNAV", true);
        } else {
          this.$store.commit("SET_MENUNAV", false);
        }
      }, 300);

      window.onresize = function () {
        lazyLayout();
      };
    },
    // 判断是否显示AI设备模块
    checkAI() {
      const success = (res) => {
        this.showAI = res.data === "no" ? false : true;
      };
      const fail = (res) => { };
      const params = {};
      this.$ajax.get("api/app/check_ai", { params, func: { success, fail } });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-aside {
  border-right: 1px solid #e6e6e6;
  overflow-x: hidden;

  .menu-home {
    display: flex;
    align-items: center;
    padding: 0 !important;
    height: 51px;

    a {
      padding-left: 20px;
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      color: #000;

      img {
        width: 16px;
      }
    }
  }

  svg {
    width: 22px;
    height: 22px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}
</style>